<template>
    <el-dialog ref="formRef" :visible.sync="visible" :title="title" width="60%" :before-close="close" destroy-on-close>
        <el-form :model="form" :rules="rules" ref="formRef" label-width="120px" class="demo-ruleForm">
			<el-row type="flex" :gutter="10">
				<el-col :span="12">
					<el-form-item label="Logo" prop="logo">
					    <elUploadImage v-model="form.logo"></elUploadImage>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="营业执照" prop="license_img">
					    <elUploadImage v-model="form.license_img"></elUploadImage>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="供应商名称" prop="store_name">
					    <el-input v-model="form.store_name" placeholder="请输入供应商名称" ></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12" v-if="!editInfo?.cate_id">
					<el-form-item label="登录账号" prop="username">
					    <el-input v-model="form.username" placeholder="请输入登录账号"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12" v-if="!editInfo?.cate_id">
					<el-form-item label="登录密码" prop="password">
					    <el-input v-model="form.password" placeholder="请输入登录密码" ></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<!-- 开通角色 1普通会员 2收单商户 -->
					<el-form-item label="开通角色" prop="open_part">
					    <el-radio-group v-model="form.open_part">
					        <el-radio :label="1">普通会员</el-radio>
							<el-radio :label="2">收单商户</el-radio>
					    </el-radio-group>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<!-- 会员类型 2个人会员 3企业会员 4个人工商户 -->
					<el-form-item label="会员类型" prop="member_type">
					    <el-select v-model="form.member_type" size="small" placeholder="请选择会员类型" @change="changemember_type"
					    	>
					    	<el-option v-for="(item,index) in member_typelist" :key="index" :label="item.title" :value="item.id">
					    	</el-option>
					    </el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12" v-if="form.member_type!==2">
					<el-form-item label="营业执照注册号" prop="license_no">
					    <el-input v-model="form.license_no" placeholder="请输入营业执照注册号"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="联系人" prop="link_man">
					    <el-input v-model="form.link_man" placeholder="请输入联系人" ></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="手机号" prop="mobile">
					    <el-input v-model.number="form.mobile" placeholder="请输入手机号"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="24" v-if="!editInfo?.cate_id">
					<el-form-item label="所属类别" prop="cate_id">
					    <storeCateSelect v-model="form.cate_id" placeholder="请选择所属类别">
					    </storeCateSelect>
					</el-form-item>
				</el-col>
				<el-col :span="24" v-if="!editInfo?.province_id">
					<el-form-item label="所属区域" prop="province_id">
					    <addressSelect  v-model="area"></addressSelect>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="详细地址" prop="address">
					    <el-input v-model="form.address"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="是否自营" prop="is_self">
					   <!-- <el-radio-group v-model="form.is_self">
					        <el-radio :label="Number(index)" v-for="(item, index) in $store.getters.is_self" :key="`is-selft-${index}`">{{
					            item }}</el-radio>
					    </el-radio-group> -->
						<el-radio-group v-model="form.is_self">
						    <el-radio :label="0">非自营</el-radio>
						    <el-radio :label="1">自营</el-radio>
						  </el-radio-group>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="是否需要结算" prop="settle">
						<el-radio-group v-model="form.settle">
						    <el-radio :label="0">不需要结算</el-radio>
						    <el-radio :label="1">需要结算</el-radio>
						  </el-radio-group>
					    <!-- <el-radio-group v-model="form.settle">
					        <el-radio :label="Number(index)" v-for="(item, index) in $store.getters.settle" :key="`settle-${index}`">{{
					            item }} </el-radio>
					    </el-radio-group> -->
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="分账比例" prop="commission_rate" v-if="form.settle!==0">
					    <el-input-number v-model="form.commission_rate" :max="1"></el-input-number> 
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="状态" prop="status">
						<el-radio-group v-model="form.status">
						    <el-radio :label="1">启用</el-radio>
						    <el-radio :label="2">禁用</el-radio>
						  </el-radio-group>
					    <!-- <el-radio-group v-model="form.status">
					        <el-radio :label="Number(index)" v-for="(item, index) in $store.getters.status" :key="`status-${index}`">{{
					            item }}</el-radio>
					    </el-radio-group> -->
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item>
					    <el-button type="primary" @click="submit">提交</el-button>
					    <el-button @click="close">取消</el-button>
					</el-form-item>
				</el-col>
			</el-row>
        </el-form>
    </el-dialog>
</template>
<script>
import elUploadImage from '@/components/el-upload-image.vue'
import addressSelect from '@/components/address-select.vue'
import storeCateSelect from '@/components/store-cate-select.vue'
import { get, post } from '@/assets/js/http.js'
export default {
    components: { elUploadImage, addressSelect, storeCateSelect },
    props: {
        editInfo: {
            type: Object,
            default() {
                return null
            }
        },
		title:{
			type:String,
			default:''
		}
    },
    data() {
		var checkAge = (rule, value, callback) => {
			console.log(value,'value')
		        if (value=='') {
		          return callback(new Error('分账比例不能为空'));
		        }
		        setTimeout(() => {
		          if (0>value||value> 1) {
		            callback(new Error('必须低于1'));
		          } else {
		            callback();
		          }
		        }, 1000);
		      };
        return {
            visible: false,
            area: [],
			member_typelist:[{id:2,title:'个人会员'},{id:3,title:'企业会员'},{id:4,title:'个人工商户'}],//2个人会员 3企业会员 4个人工商户
            form: {
                address: '',//详细地址
                cate_id: '',//所属类别editInfo
                city_id: '',
                commission_rate: '',//佣金比例  
                is_self: null,//是否自营0 否 1是
                link_man: '',//联系人
                logo: [],//logo路径
                mobile: '',//手机号
                password: '',//登录密码
                province_id: '',
                settle: null,//是否需要结算0 否 1是
                status: 1,//是否禁用 1否 2是
                store_name: '',//供应商名称
                street_id: '',
                town_id: '',
                username: '',//登录账号
				password: '',//登录密码
				// floor:'',
				// house_num:'',
				member_type:'',
				open_part:'',
				address_detail:'',
				license_no:'',//营业执照号
            },
            rules: {
                logo: [{ required: true, message: '请上传logo' }],
                cate_id: [{ required: true, message: '请选择所属类别', trigger: 'change' }],
                store_name: [{ required: true, message: '请输入供应商名称', trigger: 'blur' }],
                username: [{ required: true, message: '请输入登录账号', trigger: 'blur' }],
                password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
                province_id: [{ required: true, message: '请选择所属区域', trigger: 'blur' }],
                city_id: [{ required: true, message: '请选择所属区域', trigger: 'change' }],
                town_id: [{ required: true, message: '请选择所属区域', trigger: 'change' }],
                mobile: [
				    {
				        required: true,
				        message: "此项为必填项"
				    },
				    {
				        pattern:/^1([38][0-9]|4[014-9]|[59][0-35-9]|6[2567]|7[0-8])\d{8}$/,
				        message: "手机号码格式错误"
				    }
				],
                link_man: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
                address: [{ required: true, message: '请输入详细地址', trigger: 'blur' }],
				commission_rate: [{ validator: checkAge, trigger: 'blur' }],
				settle: [{ required: true, message: '请选择', trigger: 'change' }],
				open_part:[{ required: true, message: '请选择开通角色', trigger: 'blur' }],
				member_type:[{ required: true, message: '请选择', trigger: 'change' }],
				// license_img:[{ required: true, message: '请选择', trigger: 'change' }],

            }
        }
    },
    watch: {
        area() {
            this.form.province_id = this.area[0].id
            this.form.city_id = this.area[1].id
            this.form.town_id = this.area[2].id
            this.form.street_id = this.area[3].id ? this.area[3].id : 0
        },
        editInfo() {
            if (this.editInfo) {
				this.area = [...[]]
				console.log(this.area,'this.area1')
                this.form = JSON.parse(JSON.stringify(this.editInfo))
                this.form.is_self = Number(this.editInfo.is_self)
                this.form.settle = Number(this.editInfo.settle)
				this.form.status = Number(this.editInfo.status)
				if(this.form.logo.length>0){
					this.form.logo = [{
					    url: this.editInfo.logo,
					    uid: Date.now()
					}]
				}
				console.log(this.form)
				// if(this.form.license_img.length>0){
				// 	this.form.license_img = [{
				// 	    url: this.editInfo.license_img,
				// 	    uid: Date.now()
				// 	}]
				// }
				if(this.form.license_img){
					if(this.form.license_img.length>0){
						this.form.license_img = [{
						    url: this.editInfo.license_img,
						    uid: Date.now()
						}]
					}
				}
                this.open()
            }
        }
    },
    methods: {
        // 关闭弹窗
        close() {
			this.area = [...[]]
			console.log(this.area,'this.area1')
			this.form=this.$options.data().form
            this.visible = false
            this.$emit('update:editInfo', null)
        },
        // 打开弹窗
        open() {
            this.visible = true
        },
        // 提交
        submit() {
            this.$refs.formRef.validate(async (valid) => {
                if (valid) {
                    
					if(this.form.member_type!==2&&!this.form.license_no){
						this.$message('请输入营业执照注册号')
						return
					}
					if(this.form.member_type!==2&&!this.form.license_img){
						this.$message('请上传营业执照')
						return
					}
					this.form.address_detail = this.form.address_detail + this.form.address
					if(this.form.settle ==0){
						this.form.commission_rate = 0
					}
					this.$loading()
                    try {
                        await post({
                            url: this.title=='添加供应商' ? '/admin/store.store/add':'/admin/store.store/edit' ,
                            data: {
                                ...this.form,
                                logo: this.form.logo[0].url,
								icense_img:this.form.license_img?this.form.license_img.map(item => item.url).join(','):'',
                            }
                        })
                        this.$emit('confirm')
                        this.$message({
                            type: 'success',
                            message: '成功!'
                        });
                        this.visible = false
						this.form.address_detail=''
                    } finally {
                        this.$loading().close()
						this.form.address_detail=''
						this.form={}
                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
		//选择会员类型
		changemember_type(e){
			console.log(e,'e')
			this.form.member_type = e
		},
    }
}
</script>